<template>
   <div class="container-fluid "> 
    <nav class="navbar  navbar-fixed-top " role="navigation">
        <div class="row">
        <div class="col-md-1 col-md-offset-1">
    <div class="navbar-header ">
        <button type="button" class="navbar-toggle " data-toggle="collapse" style=" background-color: #fb6c2c; width: 50px; height: 40px;"
                href="#example-navbar-collapse">
            <i class="iconfont li">&#xe62e;</i>
        </button>
        <button type="button" class=" navbar-toggle " data-toggle="collapse" data-target="#example2-navbar-collapse" style=" background-color: #fb6c2c; width: 50px; height: 40px;">
         <i class="iconfont">&#xe600;</i>
        </button>
        <img src="../../assets/logo.png" class=" ico" alt="Responsive image"/>
    </div>
    </div>
    <div class="col-md-7 col-sm-12 col-xs-12">
    <div class="collapse navbar-collapse my-nav" id="example-navbar-collapse">
        <ul class="nav navbar-nav ">
            <li class="li " ><a href="#" class="active"> <i class="iconfont li">&#xe62e;</i>首页</a></li>
            <li class="li "><a href="#"> <i class="iconfont li">&#xe648;</i>文章</a></li>
            <li class="li "><a href="#"> <i class="iconfont li">&#xe617;</i>Go</a></li>
            <li class="li "><a href="#"> <i class="iconfont li">&#xe743;</i>留言</a></li>
            <li class="li "><a href="#"> <i class="iconfont li">&#xe607;</i>关于</a></li>  
            <li class="li "><a href="#"> <i class="iconfont li">&#xe645;</i>其它</a></li>      
        </ul>
    </div>
    </div>
    <div class="col-md-3 input-group  shousuo ">
    <div class=" collapse navbar-collapse " id="example2-navbar-collapse">
        <input type="text" class="inputnav form-control" style="border-top-left-radius:20px; border-bottom-left-radius:20px;width: 200px;height: 35px;" placeholder="请输入搜索关键字"/>
            <span class="input-group-btn" style="float: left;">
               <button  class="btn  btn-search mybtn" style="border-top-right-radius:20px; border-bottom-right-radius:20px; height: 35px;"><i class="iconfont">&#xe600;</i></button>
            </span>
    </div>
</div>
</div>
</nav>
</div>
</template>

<script>
export default {
    name:'Navigation',
    data(){
        return {
            active:true,
        }
    }
}
</script>

<style scoped>
.ico{
    margin: 10px;
    border-radius:10px;
    width: 60px;
    height: 60px;
}
.my-nav{
    color:#fff;
    margin: 10px;
    font-size: large;
    font-family: Arial, Helvetica, sans-serif;
}
.shousuo{
     margin: 15px;
}
.mybtn{
    margin: 5px;
    background-color: #fb6c2c;
    
}
.inputnav{
    margin: 5px 0px;
border-top-left-radius:30px;
border-bottom-left-radius:30px;
}
.li{
padding:0px 5px 0px 5px;

}

.active{color:#fb6c2c !important} 
.nav>li>a{
    color:#444444;
}
.nav>li>a:hover{
    color:#fba379;
}

</style>